<template>
  <div>
姓：<input type="text" v-model="firstName"><br>
名：<input type="text" v-model="lastName"><br>
姓名：{{ fullName }}
<button @click="changeFullName">点击改姓名</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
let firstName = ref('zhang')
let lastName = ref('san')
let fullName = computed({
  set(val){
    console.log(val);
    const [str1,str2]=val.split("-")
    firstName.value=str1
    lastName.value=str2
  },
  get(){
    return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1) + "-"+lastName.value
  }
})
function changeFullName(){
  fullName.value="lisi-lisi"
}
</script>
<style>

</style>